<template>
  <a-form-model :layout="layout" :rules="rules" :model="model" ref="form" class="form-model" @submit="submit" v-bind="formItemLayout">
    <slot></slot>
  </a-form-model>
</template>

<script>
import {FormModel} from 'ant-design-vue'
export default {
  extends: FormModel,
  name: 'EntityView',
  provide () {
    return {
      entityViewInstance: this
    }
  },
  data() {
    return {}
  },
  computed: {
    formItemLayout () {
      if (this.layout === 'horizontal') {
        return {
          labelCol: this.labelCol || {span: 10},
          wrapperCol: this.wrapperCol || {span: 14}
        }
      } else {
        return {}
      }
    }
  },
  props: {
    operatorType: String,
    layout: {
      type: String,
      default: 'horizontal'
    },
    formItemWidth: String,
    labelCol: {
      type: Object,
      default: () => ({span: 10})
    },
    wrapperCol: {
      type: Object,
      default: () => ({span: 14})
    },
  },
  methods: {
    submit (e) {
      if (e && e.preventDefault) {
        e.preventDefault()
      }
      this.$emit('submit', ...arguments)
    },
    resetFields () {
      return this.$refs.form.resetFields()
    },
    validate () {
      return this.$refs.form.validate(...arguments)
    },
    validateField () {
      return this.$refs.form.validateField(...arguments)
    },
    clearValidate () {
      return this.$refs.form.clearValidate(...arguments)
    }
  }
}
</script>

<style scoped>
.form-model{
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
</style>
